﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">jqxEditor's createCommand function enables you to add custom commands to the toolbar.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxeditor.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#editor').jqxEditor({
                height: 400,
                width: 800,
                tools: 'datetime | print | clear | backcolor | font | bold italic underline',
                createCommand: function (name) {
                    switch (name) {
                        case "datetime":
                            return {
                                type: 'list',
                                tooltip: "Insert Date/Time",
                                init: function (widget) {
                                    widget.jqxDropDownList({ placeHolder: "Insert Custom HTML", width: 170, source: ['Insert Time', 'Insert Date'], autoDropDownHeight: true });
                                },
                                refresh: function (widget, style) {
                                    // do something here when the selection is changed.
                                    widget.jqxDropDownList('clearSelection');
                                },
                                action: function (widget, editor) {
                                    var widgetValue = widget.val();
                                    var date = new Date();
                                    // return object with command and value members.
                                    return { command: "inserthtml", value: widgetValue == "Insert Time" ? date.getHours() + ":" + date.getMinutes() : date.getDate() + "-" + date.getMonth() + "-" + date.getFullYear() };
                                }
                            }
                        case "print":
                            return {
                                type: 'button',
                                tooltip: 'Print',
                                init: function (widget) {
                                    widget.jqxButton({ height: 25, width: 40 });
                                    widget.html("<span style='line-height: 24px;'>Print</span>");
                                },
                                refresh: function (widget, style) {
                                    // do something here when the selection is changed.
                                },
                                action: function (widget, editor) {
                                    // return nothing and perform a custom action.
                                    $('#editor').jqxEditor('print');
                                }
                            }
                        case "clear":
                            return {
                                type: 'button',
                                tooltip: 'Clear',
                                init: function (widget) {
                                    widget.jqxButton({ height: 25, width: 40 });
                                    widget.html("<span style='line-height: 24px;'>Clear</span>");
                                },
                                refresh: function (widget, style) {
                                    // do something here when the selection is changed.
                                },
                                action: function (widget, editor) {
                                    // return nothing and perform a custom action.
                                    $('#editor').val('');
                                }
                            }
                        case "backcolor":
                            return {
                                type: 'colorPicker',
                                tooltip: 'Background',
                                init: function (widget) {
                                    widget.jqxDropDownButton({ width: 170 });
                                    widget.jqxDropDownButton('setContent', '<span style="line-height: 24px;">Choose Background</span>');
                                },
                                refresh: function (widget, style) {
                                    // do something here when the selection is changed.
                                },
                                action: function (widget, editor) {
                                    // return nothing and perform a custom action.
                                    var color = widget.val();
                                    editor.css('background', color);
                                }
                            }
                    }
                }
            });
        });
    </script>
    <textarea id="editor">
   
    </textarea>
</body>
</html>
